<template>
  <div>
    <StoreChoice
      ref="StoreChoice"
      :isReset="isReset"
      :current="store"
      :multipleChoice="false"
      @listenToStoreSelect="getSelectStoreValue"
      :statusFilter="false"
      :hasTotal="false"
      reqUrl="/applet/manager/queryCityShopList.do?queryType=2&serviceCode=10"
    />
    <mt-popup v-model="popupVisible" position="right" :modal="false" class="memberManage-filterItem">
      <div class="scroll-view">
        <customHeader middleTitle="筛选" @leftCallBack="back"  :jsBridgeBack="false"/>
        <div class="page-body" v-if="scrollShow">
          <div class="section">
            <div class="title">门店来源</div>
            <div class="picker-val" @click="handleClickSelectStore">
              <span>{{formateStore}}</span>
              <i v-if="this.roleInfo.manyShopFlag" class="zhk-list_rarrow"></i>
            </div>
          </div>
          <div class="section has-right">
            <div class="title">渠道来源</div>
            <ul class="check-list">
              <li
                class="item"
                :class="{checked:item.checked}"
                v-for="(item,index) in payTypeList"
                :key="index"
                @click="handleListCheck(item,'payTypeList')"
              >
                {{ item.label }}
                <i class="zhk-detail_select"></i>
              </li>
            </ul>
          </div>
          <div class="section has-right">
            <div class="title">性别</div>
            <ul class="check-list">
              <li
                class="item"
                :class="{checked:item.checked}"
                v-for="(item,index) in genderList"
                :key="index"
                @click="handleListCheck(item,'genderList')"
              >
                {{ item.label }}
                <i class="zhk-detail_select"></i>
              </li>
            </ul>
          </div>
        </div>
        <div class="btn-wrap margin-safe-area-bottom">
          <div @click="reset">重置</div>
          <div @click="sure">确定</div>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import Vue from "vue";
import { Popup, Toast } from "mint-ui";
import StoreChoice from "../../components/StoreChoice/StoreChoice";
import customHeader from "../../components/header/header";
Vue.component(Popup.name, Popup);
export default {
  name: "filterItem",
  data() {
    return {
      isReset: true, //门店重置
      popupVisible: false,
      scrollShow: false,
      payTypeList: [
        { label: "支付宝", value: "1", checked: false },
        { label: "微信", value: "2", checked: false },
        { label: "线下导入", value: "3", checked: false }
      ],
      genderList: [
        { label: "男", value: "1", checked: false },
        { label: "女", value: "2", checked: false },
        { label: "未知", value: "0", checked: false }
      ],
      store: this.currentStore,
      filterBak: {
        store: [],
        payTypeList: "",
        genderList: ""
      }
    };
  },
  components: {
    customHeader,
    StoreChoice
  },
  computed: {
    formateStore() {
      let val = "";
      if (this.roleInfo.manyShopFlag!==undefined&&!this.roleInfo.manyShopFlag) {
        this.store = [
          {
            selectName: this.roleInfo.shopName,
            selectKey: this.roleInfo.yzShopId
          }
        ];
        val = this.roleInfo.shopName;
      } else if (this.store[0]) {
        val = this.store[0].selectName;
      }
      return val;
    }
  },
  props: {
    roleInfo: {
      type: Object
    },
    currentStore: {
      type: Array
    },
  },
  methods: {
    //门店选择回调
    getSelectStoreValue(value, storeName) {
      this.store = value;
    },
    //打开门店选择
    handleClickSelectStore() {
      if (this.roleInfo.manyShopFlag!==undefined&&!this.roleInfo.manyShopFlag) {
        return;
      }
      this.$refs.StoreChoice.popupShow();
    },
    handleListCheck(item, dataItem) {
      this[dataItem].forEach(function (currentValue, index, arr) {
        if (item.value === currentValue.value) {
          currentValue.checked = !currentValue.checked;
        } else {
          currentValue.checked = false;
        }
      });
    },
    popupShow() {
      this.popupVisible = true;
    },
    //深拷贝
    deepCopy(v) {
      if (v) {
        return JSON.parse(JSON.stringify(v));
      } else {
        return v;
      }
    },
    filterSure() {
      this.popupVisible = false;
      const selectObj = {
        store: this.store,
        payTypeList: this.payTypeList.filter(item => {
          return item.checked === true;
        }),
        genderList: this.genderList.filter(item => {
          return item.checked === true;
        })
      };

      this.$emit("filterChoice", selectObj);

      //备份（如果筛选项改变后没有点击确定而点了返回，则用备份数据还原所选）
      this.$nextTick(() => {
        this.filterBak.store = this.deepCopy(this.store);
        this.filterBak.payTypeList = this.deepCopy(this.payTypeList);
        this.filterBak.genderList = this.deepCopy(this.genderList);
      });
    },

    //返回
    back() {
      //还原备份（如果筛选项改变后没有点击确定而点了返回，则用备份数据还原所选）
      try {
        if (this.filterBak.payTypeList) {
          this.payTypeList = this.deepCopy(this.filterBak.payTypeList);
        }
        if (this.filterBak.genderList) {
          this.genderList = this.deepCopy(this.filterBak.genderList);
        }
        // if (this.filterBak.store.length > 0) {
        //   this.store = this.deepCopy(this.filterBak.store);
        // } else {
        //   this.isReset = new Date();
        // }
      } catch (error) {

      }

      this.popupVisible = false;
    },

    //重置
    reset() {
      this.payTypeList.forEach((v, index) => {
          v.checked = false;
      });
      this.genderList.forEach((v, index) => {
          v.checked = false;
      });
    },
    //确定
    sure() {
      this.filterSure();
    },

  },
  watch: {
    popupVisible(val) {
      if (val) {
        setTimeout(() => {
          this.scrollShow = true;
        }, 100);
      }
    },
    currentStore(v) {
      this.store = v;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "memberManage";
</style>
<style lang="scss" >
.date-timer-picker {
  .picker-slot {
    font-size: 0.76rem;
  }
}
.pickerZindex {
  .mask {
    background: rgba(0, 0, 0, 0.5) !important;
  }
}
</style>
